<script setup>
import {  reactive} from "vue";
import { useRouter,useRoute } from 'vue-router';

const nameleft = reactive(
    [
      {name:'Home',
        icon:'../imgs/setup.png',
        routerName:'home'
      },
      {name:'Product',
        icon:'',
        routerName:'login'
      },
      {name:'Order',
        icon:'',
        routerName:'about'
      },
    ]
);

const router=useRouter(); 
const route=useRoute();                                                                                                                                        
const userId = route.params.id; // 获取路径参数
console.log(userId,'userId')
const tologin=()=>{
  router.push({ name: 'login' });
}
const topage=(routerName)=>{
   router.push({name:`${routerName}`})
}


</script>
<template>
    <div class="NavLeft" >
        <div class="navBox">
            <div class="nav-item" v-for="(item,index) in nameleft" :key="index" @click="topage(item.routerName)">
                <div class="nav-icon"></div>
                <div class="nav-name">{{ item.name }}</div>
                
            </div>
        </div>
        <div class="loginBtn" @click="tologin">tologin</div>
        <div class="userinfo">
            <div class="user-avatar"></div>
            <div class="user-name"></div>
        </div>
        
            
      </div>
      
       
    
</template>
<style lang="scss">
.NavLeft {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color:royalblue;
    border-radius: 5px;
    .navBox {
    flex: 1;
   
    .nav-item {
        padding: 5px 8px;
        
        display: flex;
        justify-content: center;
       
        color: #000000;
        &.active{
            background-color: aquamarine;
            color: beige;
        }
        &:hover{
            background-color:rgb(255, 255, 255);
            color: royalblue;
            cursor: pointer;
        }
    }
    }   
    

}

</style>